<template>
  <el-container class="setting-center_mall-shop-setting_shop-initialize">
    <el-main>
      <div class="wrapper-box">
        <div class="dis">
          <div class=" goods-list-image">
            <div class="pos_r">
              <img  class="mo-image"
                :src="dataField.styleType === '1' ? require('../../../../assets/micro-page/listType_1_1.png') : require('../../../../assets/micro-page/listType_1_2.png') "
                alt=""
              >
              <div class="pos_a image-box-container">
                <div v-if="dataField.styleType === '1'">
                  <div v-if="dataField.styleExData.showSoldOut === '1'">
                    <img class="soldOut" v-for="(item,index) in 4" :key="index" src="../../../../assets/micro-page/soldOut.png" alt="">
                  </div>
                  <div v-if="dataField.styleExData.showGoodsTag === '1'">
                    <img class="pos_a goodsTag1" src="../../../../assets/micro-page/listTpl_member.png" alt="">
                    <img class="pos_a goodsTag2" src="../../../../assets/micro-page/listTpl_goods.png" alt="">
                    <img class="pos_a goodsTag3" src="../../../../assets/micro-page/listTpl_member.png" alt="">
                    <img class="pos_a goodsTag4" src="../../../../assets/micro-page/listTpl_limit.png" alt="">
                    <img class="pos_a goodsTag5" src="../../../../assets/micro-page/listTpl_limit.png" alt="">
                  </div>

                  <div v-if="dataField.styleExData.showGoodsSaleNum === '1'">
                    <div v-for="(item,index) in 4" :key="index" class="pos_a goodsSales " :class="'goodsSales'+(index+1)">已售1.2万件</div>
                  </div>

                  <div v-if="dataField.styleExData.showCart === '1'">
                    <img v-for="(item,index) in 4" :key="index" class="pos_a subAdd" :class="'cart'+(index+1)" :src="dataField.cartType === '1' ? require('../../../../assets/micro-page/showCart_1.png') : require('../../../../assets/micro-page/showCart_2.png')" alt="">
                  </div>
                </div>
                <div v-if="dataField.styleType === '2'">
                  <div v-if="dataField.styleExData.showSoldOut === '1'">
                    <img class="soldOut2" v-for="(item,index) in 4" :key="index" src="../../../../assets/micro-page/soldOut.png" alt="">
                  </div>
                  <div v-if="dataField.styleExData.showGoodsTag === '1'">
                    <img class="pos_a goodsTag2-1" src="../../../../assets/micro-page/listTpl_goods.png" alt="">
                    <img class="pos_a goodsTag2-2" src="../../../../assets/micro-page/listTpl_member.png" alt="">
                    <img class="pos_a goodsTag2-3" src="../../../../assets/micro-page/listTpl_limit.png" alt="">
                  </div>
                  <div v-if="dataField.styleExData.showGoodsSaleNum === '1'">
                    <div class="pos_a goodsSales2-t goodsSales2-1">已售1.2万件</div>
                    <div class="pos_a goodsSales2-t goodsSales2-2">已售1.2万件</div>
                  </div>

                  <div v-if="dataField.styleExData.showCart === '1'">
                    <img v-for="(item,index) in 2" :key="index" class="pos_a subAdd-2" :class="'cart-2-'+(index+1)" :src="dataField.cartType === '1' ? require('../../../../assets/micro-page/showCart_1.png') : require('../../../../assets/micro-page/showCart_2.png')" alt="">
                  </div>


                </div>
            </div>
            </div>
          </div>
          <div class="flex_1">
            <div class="goods-set">
              <el-form ref="addMenu" :model="dataField" label-width="80px">
                <el-form-item class="person-center-form-item" label="默认样式">
                  <el-radio v-model="dataField.styleType" label="1">单列</el-radio>
                  <el-radio v-model="dataField.styleType" label="2">双列</el-radio>
                </el-form-item>
                <el-form-item class="person-center-form-item" label="显示元素">
                  <el-checkbox true-label="1" false-label="0" v-model="dataField.styleExData.showGoodsSaleNum">商品销量</el-checkbox>
                  <el-checkbox true-label="1" false-label="0" v-model="dataField.styleExData.showSoldOut">售罄标识</el-checkbox>
                  <el-checkbox true-label="1" false-label="0" v-model="dataField.styleExData.showGoodsTag">商品标签</el-checkbox>
                </el-form-item>
                <el-form-item class="person-center-form-item" label="综合排序">
                  <el-radio v-model="dataField.showType" :label="0">默认排序</el-radio>
                  <el-radio v-model="dataField.showType" :label="1">智能排序</el-radio>
                </el-form-item>

                <el-form-item class="person-center-form-item" label="购物车">
                  <el-radio v-model="dataField.cartType" label="1">样式1</el-radio>
                  <el-radio v-model="dataField.cartType" label="2">样式2</el-radio>
                </el-form-item>
                <el-form-item class="person-center-form-item" label="分享标题">
                  <el-input show-word-limit maxlength="15" v-model="dataField.title"></el-input>
                </el-form-item>
                <el-form-item class="person-center-form-item" label="分享描述">
                  <el-input placeholder="来自好友X (昵称) 的推荐" type="textarea" v-model="dataField.description"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </el-main>
    <div class="wrapper-save">
      <el-button :loading="isSaving" :disabled="isSaving" size="mini"  type="primary"  @click="save">保存</el-button>
    </div>
  </el-container>
</template>

<script>
import Index from './index'

export default Index
</script>
<style lang="scss">
.el-form .el-form-item {
  &.person-center-form-item {
    margin-bottom: 16px !important;
  }
}

.person-center-form-item {
  font-size: 12px;

  .el-form-item__label, .el-form-item__content, .el-radio__label, .el-button, .el-checkbox .el-checkbox__label {
    font-size: 12px;
  }
}

</style>
<style lang="scss" scoped>
@import "index";
</style>
